<template>
  <div class="main">
      <!-- 头部部分 -->
      <div class="header">
          <span class="iconfont iconjiantou2" @click="$router.back()"></span>
          <span class="iconfont iconnew"></span>
          <span class="text" @click="handfollow"
          :class="{hasFollow:postlist.has_follow,notfollow:!postlist.has_follow}">{{postlist.has_follow?'已关注':'关注'}}</span>
      </div>
     <div class="wz" v-if='postlist.type==1'>
          <h3>{{postlist.title}}</h3>
      <span class="author">{{postlist.user.nickname}}</span>
      <span class="date">{{postlist.create_date.split('T')[0]}}</span>
      <p v-html="postlist.content">        
      </p> 
     </div>
     <!-- 显示视频部分 -->
     <div class="vedio" v-if='postlist.type==2'>
            <div class="imgtex">
                <img :src="postlist.cover[0].url" alt="">
                <span class="iconfont iconshipin"></span>
            </div>
           <div class="ahthor">
               <img :src='"http://127.0.0.1:3000"+ postlist.user.head_img' alt="">
               <span class="author">
                   火星时报
               </span>
           </div>
           <p class="title">
               {{postlist.title}}
           </p>
     </div>
      <div class="mainbottom">
          <div class="dianzan">
              <span class="iconfont icondianzan"
                   :class="{haslike:postlist.has_like}" 
                   @click="handlike" ></span>
              <span class="num1">{{postlist.comment_length}}</span>
          </div>
          <div class="wetchat">
              <span class="iconfont iconweixin"></span>
              <span class="text">微信</span>
          </div>
       </div>    
  </div>
</template>

<script>
export default {
    data(){
          return {
              postlist:{}
          }
    },
    created(){
          console.log(this.$route.query.id);
          this.$axios({
              url:'/post/'+ this.$route.query.id
          }).then(res=>{
            //   console.log(res);
              this.postlist=res.data.data
              console.log(this.postlist);
              
          })
    },
    methods:{
        handfollow(){
            // 假如已经是关注，那么执行取消关注的端口
            if(this.postlist.has_follow){
                 this.$axios({
                     url:'/user_unfollow/'+ this.postlist.user.id
                 }).then(res=>{
                     console.log(res);
                     if(res.data.message=='取消关注成功'){
                         this.postlist.has_follow=false
                     }
                 })
            }
            else{
                //还没有关注用户，需要发起关注用户的请求
                this.$axios({
                    url:'/user_follows/'+this.postlist.user.id
                }).then((res)=>{
                    console.log(res);
                    if(res.data.message=='关注成功'){
                        this.postlist.has_follow=true
                    }
                })

            }
        },
        // 点赞的axios的请求
        handlike(){
            this.$axios({
                url:'/post_like/'+this.$route.query.id
            }).then(res=>{
                console.log(res);
                if(res.data.message=='取消成功'){
                    this.postlist.has_like=false
                    if(this.postlist.comment_length!=0){
                       this.postlist.comment_length-=1
                    }   
                }
                else{
                    this.postlist.has_like=true
                    this.postlist.comment_length+=1
                }
            })
        }
    }

}
</script>

<style lang="less" scoped>
.main{
    padding: 18/360*100vw;
    border-bottom: 2px solid #cccccc;
    .header{
        padding: 0 8/360*100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconjiantou2{
            font-size: 16px;
            color: #333;
        }
        .iconnew{
            flex: 1;
            font-size: 54/360*100vw;
        }
        .text{
            font-size: 16/360*100vw;
            color: #333;
            line-height: 30/360*100vw;
            padding: 3px 12px;
            border: 1px solid #cccc;
            border-radius: 18/360*100vw;
        }
    }
    .wz{
        h3{
        padding: 0;
        margin: 0;
        font-size: 22/360*100vw;
        line-height: 26/360*100vw;   
        margin-bottom: 8/360*100vw;  
    }
    .author{
        font-size: 14px;
        color: #999;
        margin-right: 8/360*100vw;
    }
    .date{
        font-size: 14px;
        color: #999;
    }
    p{
        padding: 0;
        margin: 0;
        font-size: 18px;
        color: #333;
        margin-top: 20/360*100vw;
    }
    }
    .vedio{
        padding: 10/360*100vw;
        position: relative;
        img{
            width: 360/360*100vw;
            height: 180/360*100vw;
        }
        .iconshipin{
           position: absolute;
           top: 50%;
           left: 50%;
           line-height: 54/360*100vw;
           font-size: 46/360*100vw;
           transform: translateX(-27/360*100vw) translateY(-27/360*100vw);
           background-color: rgba(225, 225, 225, 0.6);
           color: #ffffff;
           border-radius: 50% ;
        }
        .ahthor{
            margin-top: 20/360*100vw;
            img{
                width: 25/360*100vw;
                height: 25/360*100vw;
                border-radius: 50%;
                vertical-align: middle;
            }
            .author{
                font-size: 14/360*100vw;
                color: #888;
            }.title{
                font-size: 16/360*100vw;
                color: #333;
            }
        }

    }
    .mainbottom{
        margin-top: 40/360*100vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .dianzan,
        .wetchat{
            padding: 8/360*100vw  14/360*100vw ;
            border: 1px solid #ccc;
            border-radius: 18/360*100vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icondianzan{
                margin-right: 5/360*100vw;
            }   
        }
        .iconweixin{
            font-size: 14/360*100vw;
            color: #333;
             margin-right: 5/360*100vw;
             color: #13cb13;
        }

    }
    .notfollow{
        background-color: #ff0000;
        color: #ffffff!important
    }
    .haslike{
        border-color: red ;
        color: #ff0000;
    }  
}
</style>